<!--
 * @Autor: CQJ
 * @Date: 2022-08-16 22:55:35
 * @LastEditors: CQJ
 * @LastEditTime: 2022-08-19 23:08:54
 * @Description:
-->
<template>
  <div class="dashboard-container" v-loading="loading">
    <home-page :data="dashBoardList" />
    <system-info :info="systemData" />
  </div>
</template>
<script lang="ts">
export default { name: 'Dashboard' };
</script>

<script setup lang="ts">
import { onMounted, reactive, toRefs } from 'vue';
import { Dashboard, SysInfoType } from '@/types/api/dashboard/dashboard';
import HomePage from './components/homePage.vue';
import SystemInfo from './components/systemInfo.vue';
const state = reactive({
  loading: false,
  dashBoardList: [] as Dashboard[],
  systemData: {} as SysInfoType
});
const { loading, dashBoardList, systemData } = toRefs(state);

const getList = () => {
  state.loading = true;
  setTimeout(() => {
    state.dashBoardList = [
      {
        id: '1',
        type: 1,
        number: 5,
        activeNumber: 5,
        disableNumber: 5,
        introduce: '站点（内容库）总数量，包括启用和禁用'
      },
      {
        id: '2',
        type: 2,
        number: 5,
        activeNumber: 5,
        disableNumber: 5,
        introduce: '广告库总数量，包括启用和禁用'
      },
      {
        id: '3',
        type: 3,
        number: 5,
        activeNumber: 5,
        disableNumber: 5,
        introduce: '启用中的采集资源数量',
        introduce2: '启用中的定时采集任务数量',
        realTimeCollectTask: 2
      },
      {
        id: '4',
        type: 4,
        number: 2,
        alreadySet: 2,
        noSet: 1,
        playLine: 3
      }
    ];
    state.loading = false;
  }, 1000);
};
const getInfo = () => {
  state.loading = true;
  setTimeout(() => {
    state.systemData = {
      version: 'V1.0.1.23',
      tel: '666666@qq.com',
      address: 'https://www.qunacms.com',
      serverSystem: 'Linux',
      webServer: 'nginx/1.20.1',
      thinkPhp: '5.0.24',
      ip: ' (192.6.6.6:80)',
      phpVersion: ' 5.6.40  >5.30',
      maxSize: '50M'
    };
    state.loading = false;
  }, 1000);
};
onMounted(() => {
  getList();
  getInfo();
});
</script>
<style lang="scss" scoped>
.dashboard-container {
  width: 100%;
  height: 100%;
  padding: 24px;
}
</style>
